{% extends "bootstrap/base.html" %}

{% block title %}Flack!{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='colors.css') }}">
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='models/user.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='models/message.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='models/user_list.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='models/message_list.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='models/token.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/user.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/user_list.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/message.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/message_list.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/login_form.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='views/post_form.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}

{% block navbar %}
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Flack!</a>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<!-- main page layout -->
<div id="content" class="container">
    <div class="col-xs-9 messages-panel" id="messages">
        <!-- chat messages -->
    </div>
    <div class="col-xs-3 participants-panel">
        <ul id="participants">
            <!-- participant list -->
        </ul>
    </div>
</div>
<div class="footer navbar-footer-fixed">
    <div class="container" id="footer">
        <div id="login-form">
            <!-- login form -->
        </div>
        <div id="post-form">
            <!-- post form -->
        </div>
    </div>
</div>

<!-- templates -->
<script type="text/template" id="user-template">
    <%= user.nickname %>
</script>
<script type="text/template" id="message-template">
    <span class="user"></span> <%= msg.html %>
</script>
<script type="text/template" id="login-form-template">
    <form data-submit="loginFormView">
        <input type="nickname" class="form-control horizontal-control" size="8" id="nickname" placeholder="Nickname">
        <input type="password" class="form-control horizontal-control" size="8" id="password" placeholder="Password">
        <button type="submit" class="btn btn-default horizontal-control">Register or Sign In</button>
        <div class="horizontal-control text-danger" id="login-error"></div>
    </form>
</script>
<script type="text/template" id="post-form-template">
    <form data-submit="postFormView">
        <input type="text" class="form-control horizontal-control" style="width: calc(100% - 75px);" id="message" placeholder="Type your message">
        <button type="submit" class="btn btn-default horizontal-control">Submit</button>
    </form>
</script>
{% endblock %}
